import { TimeSelect } from "element-ui";

export default class Draw {
  constructor(options) {
    this.imgCvs = options.imgCvs;
    this.imgCtx = this.imgCvs.getContext('2d');
    this.bitmap = options.bitmap;
    // 画布配置信息
    statusConfig = {
      IDLE: 0, // 闲置即正常状态   // 矩形框被拖拽的三种状态
      DRAG_START: 1,// 开始拖拽
      DRAGING: 2, // 拖拽中 ,
      MOVE_START: 3, // 画布移动开始的状态 因为画布移动也是一个持续的过程 所以 也要记录状态
      MOVING: 4
    },
    canvasInfo = {
      status: statusConfig.IDLE,
      dragTarget: null,
      lastEvtPos:{ x: null, y: null }, // 计算上次鼠标位置 为了确定这次基于上次的偏移量是多少  以便设置阈值 大于之后才认为是拖动 而不是误触或者误点击
      offsetEvtPos: { x: null, y: null }, // 记录鼠标的实时位置相对于画布的 以便形状移动可以相对于鼠标的位置移动 而不是首先将图形的开始位置设置为鼠标当前的位置
      offseteMouseEvtPos:  { x: null, y: null },// 解决画布移动造成抖动偏移的问题
      offset:{ x:0, y:0 },  // 画布放缩后会出现的偏移 画布的偏移
      scale: 1, // 画布当前的缩放
      scaleStep:0.1,
      maxScale: 8,
      minScale: 1,
    }
  }

  drawBitmap(bitmap = this.bitmap) {
    this.imgCtx.drawImage(bitmap, 0 ,0, this.imgCvs.width, imgCvs.height);
  }
  // 绘制矩形 需要开始点坐标x y 矩形宽高 w h
  drawRect(ctx, x, y, w, h) {
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.rect(x ,y ,w,h);
    ctx.stroke();
    ctx.closePath();// 自动闭合至结束路径
    ctx.restore();
  }
}